<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bd定制</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/main.css">
    <script src="../../js/libs/jquery-3.4.1.min.js"></script>
    <script src="../../js/bootstrap/bootstrap.js"></script>
    <script src="../../js/bootstrap/bootstrap.bundle.js"></script>
    <script src="../../js/main2.js"></script>
</head>
<body>
<header>
    <div class="header">
        <p class="col-2">可视化表单定制</p>
        <div class="">
            <button id="importBtn" type="button"
                    class="btn btn-primary btn-sm" data-toggle="modal"
                    data-target="#exampleModal">
                导入表单
            </button>
            <button id="exportBtn" type="button"
                    class="btn btn-success btn-sm">导出表单</button>
        </div>
    </div>
</header>
<div class="contentLeft col-2">
    <ul class="nav flex-column">
        <li class="nav-item">
                <svg class="bi bi-table" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
                    <path fill-rule="evenodd" d="M15 4H1V3h14v1z"/>
                    <path fill-rule="evenodd" d="M5 15.5v-14h1v14H5zm5 0v-14h1v14h-1z"/>
                    <path fill-rule="evenodd" d="M15 8H1V7h14v1zm0 4H1v-1h14v1z"/>
                    <path fill-rule="evenodd" d="M15 8H1V7h14v1zm0 4H1v-1h14v1z"/>
                    <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v2H0V2z"/>
                </svg>
            <div class="newTextInput">
                <form>
                    <div class="form-group">
                        <label>文本输入框</label>
                        <input type="text" class="form-control" placeholder="文本" readonly>
                    </div>
                </form>
            </div>
        </li>
        <li class="nav-item">
            <svg class="bi bi-envelope-fill" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555zM0 4.697v7.104l5.803-3.558L0 4.697zM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586l-1.239-.757zm3.436-.586L16 11.801V4.697l-5.803 3.546z"/>
            </svg>
            <div class="newEmailInput">
                <form>
                    <div class="form-group">
                        <label>邮箱输入框</label>
                        <input type="text" class="form-control"
                               placeholder="name@example.com"  readonly>
                    </div>
                </form>
            </div>
        </li>
        <li class="nav-item">
            <svg class="bi bi-card-checklist" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M14.5 3h-13a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/>
                <path fill-rule="evenodd" d="M7 5.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0zM7 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z"/>
            </svg>
            <div class="newSelect">
                <form>
                    <div class="form-group">
                        <label for="exampleFormControlSelect1">多选框</label>
                        <select class="form-control"
                                id="exampleFormControlSelect1"  disabled>
                            <option>选项一</option>
                            <option>选项二</option>
                            <option>选项三</option>
                        </select>
                    </div>
                </form>
            </div>
        </li>
    </ul>
</div>
<div class="contentShowPlace col-7">
    <ul class="nav flex-column">
        <li class="nav-item">
            <div class="newBdName">
                <h3><label>表单名称</label></h3>
                <hr>
            </div>
        </li>
    </ul>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">已有表单
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="alreadyLi">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">名称</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary"
                        data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">确定
                </button>
            </div>
        </div>
    </div>
</div>
</body>
</html>